<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜实现方式二</title>
    <style>
         * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 600px;
            height: 600px;
            border: 1px solid;
            margin: 50px auto;
            position: relative;
        }

        .wrap .smallBox {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: absolute;
        }

        .wrap .smallBox img {
            width: 200px;
            height: 200px;
        }

        .wrap .smallBox .mask {
            width: 80px;
            height: 80px;
            position: absolute;
            background: rgba(200, 200, 200, 0.6);
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }

        .wrap .bigBox {
            width: 200px;
            height: 200px;
            border: 1px solid;
            position: absolute;
            left: 230px;
            top: 0;
            overflow: hidden;
            display: none;
        }

        .wrap .bigBox img {
            width: 400px;
            height: 400px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="smallBox">
            <img src="./image/show_1.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="bigBox">
            <img src="./image/show_1.jpg" alt="">
        </div>
    </div>
    <script>
        //获取元素
        let smallBox = document.querySelector('.smallBox')
        let mask = document.querySelector('.mask')
        let bigBox = document.querySelector('.bigBox')
        let pic = document.querySelector('.bigBox>img')
        
        // console.log(smallBox,mask,bigBox,pic)
        //当鼠标移入到bigBox里面时，让隐藏的元素显示
        smallBox.onmouseover = function() {
            mask.style.display = 'block'
            bigBox.style.display = 'block'
        }

        //当鼠标移出到bigBox外面时，让显示的元素隐藏
        smallBox.onmouseout = function() {
            mask.style.display = 'none'
            bigBox.style.display = 'none'
        }

        //当鼠标移入到smallBox里面时让鼠标跟随
        smallBox.onmousemove = function(e) {
            e = e || window.event
            //获取鼠标的坐标
            let x = e.clientX -smallBox.offsetParent.offsetLeft - mask.offsetWidth/2
            let y = e.clientY -smallBox.offsetParent.offsetTop - mask.offsetHeight/2
            //边界值判断
            if(x <= 0) {
                x = 0
            }else if(x >= smallBox.offsetWidth - mask.offsetWidth) {
                x = smallBox.offsetWidth - mask.offsetWidth
            }
            if(y <= 0) {
                y = 0
            }else if(y >= smallBox.offsetHeight - mask.offsetHeight) {
                y = smallBox.offsetHeight - mask.offsetHeight
            }
            //赋值
            mask.style.left = x + 'px'
            mask.style.top = y + 'px'
            //计算比例
            let w = x / (smallBox.offsetWidth - mask.offsetWidth)
            let h = y / (smallBox.offsetHeight - mask.offsetHeight)
            //给大图进行赋值操作（比例*大图可以移动的最大距离）
            pic.style.left = -w * (pic.offsetWidth - bigBox.offsetWidth) + 'px'
            pic.style.top = -h * (pic.offsetHeight - bigBox.offsetHeight) + 'px'

        }
    </script>
</body>
</html>